<template>
  <div class="settings-container">
    <!-- 顶部导航栏 -->
    <div class="top-navbar">
      <div class="nav-left">
        <el-button 
          @click="goBack" 
          type="text" 
          class="back-btn"
          :icon="ArrowLeft"
        >
          返回
        </el-button>
        <div class="nav-title">
          <div class="title-icon">
            <el-icon><Setting /></el-icon>
          </div>
          <div class="title-content">
            <h1 class="title-text">应用设置</h1>
            <span class="title-subtitle">配置下载参数和系统选项</span>
          </div>
        </div>
      </div>
      <div class="nav-right">
        <el-button 
          @click="resetSettings" 
          type="warning" 
          :icon="Refresh"
          class="reset-btn"
        >
          重置设置
        </el-button>
        <el-button 
          @click="saveSettings" 
          type="primary" 
          :icon="Check"
          class="save-btn"
        >
          保存设置
        </el-button>
      </div>
    </div>

    <div class="settings-content">
      <!-- 下载设置 -->
      <el-card class="settings-card" shadow="never">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="header-icon"><Download /></el-icon>
              <span class="card-title">下载设置</span>
            </div>
            <el-tag type="info" size="small">核心配置</el-tag>
          </div>
        </template>
        
        <el-form :model="settings" label-width="160px" class="settings-form">
          <el-form-item label="默认下载位置">
            <div class="path-input-group">
              <el-input 
                v-model="settings.defaultDownloadPath" 
                placeholder="请选择默认下载路径"
                readonly
                class="path-input"
              />
              <el-button 
                @click="selectDownloadPath" 
                type="primary" 
                :icon="FolderOpened"
                class="select-btn"
              >
                选择路径
              </el-button>
            </div>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              设置下载文件的默认保存位置
            </div>
          </el-form-item>

          <el-form-item label="默认并发线程数">
            <div class="number-input-group">
              <el-input-number 
                v-model="settings.defaultConcurrentThreads" 
                :min="1" 
                :max="32"
                controls-position="right"
                class="number-input"
              />
              <span class="input-unit">线程</span>
            </div>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              建议设置为 4-16，数值越高下载速度越快，但可能影响系统性能
            </div>
          </el-form-item>

          <el-form-item label="默认重试次数">
            <div class="number-input-group">
              <el-input-number 
                v-model="settings.defaultRetryCount" 
                :min="0" 
                :max="10"
                controls-position="right"
                class="number-input"
              />
              <span class="input-unit">次</span>
            </div>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              下载失败时的自动重试次数
            </div>
          </el-form-item>

          <el-form-item label="最大并发任务数">
            <div class="number-input-group">
              <el-input-number 
                v-model="settings.maxConcurrentTasks" 
                :min="1" 
                :max="10"
                controls-position="right"
                class="number-input"
              />
              <span class="input-unit">个</span>
            </div>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              同时运行的最大下载任务数量
            </div>
          </el-form-item>

          <el-form-item label="创建任务后自动开始">
            <el-switch 
              v-model="settings.autoStartDownload" 
              class="custom-switch"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              创建新任务后是否自动开始下载
            </div>
          </el-form-item>

          <el-form-item label="显示下载速度">
            <el-switch 
              v-model="settings.showDownloadSpeed" 
              class="custom-switch"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              在任务列表中显示实时下载速度
            </div>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 清理设置 -->
      <el-card class="settings-card" shadow="never">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="header-icon"><Delete /></el-icon>
              <span class="card-title">清理设置</span>
            </div>
            <el-tag type="warning" size="small">数据管理</el-tag>
          </div>
        </template>
        
        <el-form :model="settings" label-width="160px" class="settings-form">
          <el-form-item label="自动清理已完成任务">
            <el-switch 
              v-model="settings.autoCleanupCompleted" 
              class="custom-switch"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              自动清理已完成的任务记录
            </div>
          </el-form-item>

          <el-form-item label="清理天数" v-if="settings.autoCleanupCompleted">
            <div class="number-input-group">
              <el-input-number 
                v-model="settings.cleanupAfterDays" 
                :min="1" 
                :max="365"
                controls-position="right"
                class="number-input"
              />
              <span class="input-unit">天</span>
            </div>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              完成后多少天自动清理任务记录
            </div>
          </el-form-item>

          <el-form-item label="清理临时文件">
            <el-switch 
              v-model="settings.cleanupTempFiles" 
              class="custom-switch"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              自动清理下载过程中的临时文件
            </div>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 其他设置 -->
      <el-card class="settings-card" shadow="never">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="header-icon"><Tools /></el-icon>
              <span class="card-title">其他设置</span>
            </div>
            <el-tag type="info" size="small">系统选项</el-tag>
          </div>
        </template>
        
        <el-form :model="settings" label-width="160px" class="settings-form">
          <el-form-item label="启用通知">
            <el-switch 
              v-model="settings.enableNotifications" 
              class="custom-switch"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              下载完成或失败时显示系统通知
            </div>
          </el-form-item>

          <el-form-item label="语言">
            <el-select 
              v-model="settings.language" 
              style="width: 200px"
              class="language-select"
            >
              <el-option label="简体中文" value="zh-CN" />
              <el-option label="English" value="en-US" />
            </el-select>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              选择应用程序界面语言
            </div>
          </el-form-item>

          <el-form-item label="主题">
            <el-select 
              v-model="settings.theme" 
              style="width: 200px"
              class="theme-select"
            >
              <el-option label="浅色主题" value="light" />
              <el-option label="深色主题" value="dark" />
              <el-option label="跟随系统" value="auto" />
            </el-select>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              选择应用程序界面主题
            </div>
          </el-form-item>

          <el-form-item label="启动时检查更新">
            <el-switch 
              v-model="settings.checkUpdateOnStartup" 
              class="custom-switch"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              应用启动时自动检查是否有新版本
            </div>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 高级设置 -->
      <el-card class="settings-card" shadow="never">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="header-icon"><Cpu /></el-icon>
              <span class="card-title">高级设置</span>
            </div>
            <el-tag type="danger" size="small">谨慎修改</el-tag>
          </div>
        </template>
        
        <el-form :model="settings" label-width="160px" class="settings-form">
          <el-form-item label="HTTP超时时间">
            <div class="number-input-group">
              <el-input-number 
                v-model="settings.httpTimeout" 
                :min="5" 
                :max="300"
                controls-position="right"
                class="number-input"
              />
              <span class="input-unit">秒</span>
            </div>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              HTTP请求的超时时间，建议保持默认值
            </div>
          </el-form-item>

          <el-form-item label="分片大小">
            <div class="number-input-group">
              <el-input-number 
                v-model="settings.segmentSize" 
                :min="1024" 
                :max="1048576"
                :step="1024"
                controls-position="right"
                class="number-input"
              />
              <span class="input-unit">字节</span>
            </div>
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              单个分片的下载大小，影响内存使用和下载稳定性
            </div>
          </el-form-item>

          <el-form-item label="启用调试模式">
            <el-switch 
              v-model="settings.debugMode" 
              class="custom-switch"
            />
            <div class="form-tip">
              <el-icon><InfoFilled /></el-icon>
              启用详细的调试日志输出
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useSettingsStore } from '../stores/settingsStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  ArrowLeft,
  Setting,
  Refresh,
  Check,
  Download,
  Delete,
  Tools,
  Cpu,
  FolderOpened,
  InfoFilled
} from '@element-plus/icons-vue'

const router = useRouter()
const settingsStore = useSettingsStore()

// 设置数据
const settings = ref({
  defaultDownloadPath: '',
  defaultConcurrentThreads: 8,
  defaultRetryCount: 3,
  maxConcurrentTasks: 3,
  autoStartDownload: true,
  showDownloadSpeed: true,
  autoCleanupCompleted: false,
  cleanupAfterDays: 30,
  cleanupTempFiles: true,
  enableNotifications: true,
  language: 'zh-CN',
  theme: 'light',
  checkUpdateOnStartup: true,
  httpTimeout: 30,
  segmentSize: 102400,
  debugMode: false
})

// 返回上一页
const goBack = () => {
  router.push('/')
}

// 选择下载路径
const selectDownloadPath = async () => {
  try {
    const result = await window.electronAPI.selectDirectory()
    if (result.success) {
      settings.value.defaultDownloadPath = result.data.path
      ElMessage.success('下载路径已设置')
    }
  } catch (error) {
    ElMessage.error('选择路径失败: ' + error.message)
  }
}

// 保存设置
const saveSettings = async () => {
  try {
    await settingsStore.updateSettings(settings.value)
    ElMessage.success('设置已保存')
  } catch (error) {
    ElMessage.error('保存设置失败: ' + error.message)
  }
}

// 重置设置
const resetSettings = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重置所有设置吗？此操作不可恢复。',
      '确认重置',
      {
        confirmButtonText: '确定重置',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await settingsStore.resetSettings()
    await loadSettings()
    ElMessage.success('设置已重置为默认值')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('重置设置失败: ' + error.message)
    }
  }
}

// 加载设置
const loadSettings = async () => {
  try {
    // 直接使用settingsStore.settings而不是getSettings方法
    const currentSettings = settingsStore.settings
    Object.assign(settings.value, currentSettings)
  } catch (error) {
    console.error('加载设置失败:', error)
  }
}

onMounted(async () => {
  await loadSettings()
})
</script>

<style scoped>
.settings-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0;
}

/* 顶部导航栏 */
.top-navbar {
  background: #ffffff;
  border-bottom: 1px solid #e4e7ed;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.nav-left {
  display: flex;
  align-items: center;
}

.back-btn {
  color: #606266;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s;
  margin-right: 16px;
}

.back-btn:hover {
  background: #f5f7fa;
  color: #409eff;
}

.nav-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-icon {
  width: 48px;
  height: 48px;
  background: #e6a23c;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24px;
}

.title-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.title-text {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  line-height: 1.2;
}

.title-subtitle {
  font-size: 14px;
  color: #909399;
  font-weight: 400;
}

.nav-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.reset-btn {
  background: #fef0f0;
  border: 1px solid #fbc4c4;
  color: #f56c6c;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
}

.reset-btn:hover {
  background: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}

.save-btn {
  background: #67c23a;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
  transition: all 0.3s;
}

.save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(103, 194, 58, 0.4);
}

/* 设置内容 */
.settings-content {
  padding: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.settings-card {
  margin-bottom: 24px;
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #fafafa;
  border-bottom: 1px solid #e4e7ed;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  width: 20px;
  height: 20px;
  color: #409eff;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 表单样式 */
.settings-form {
  padding: 24px;
}

.el-form-item {
  margin-bottom: 32px;
}

.el-form-item__label {
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

/* 路径输入组 */
.path-input-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.path-input {
  flex: 1;
}

.path-input :deep(.el-input__wrapper) {
  background: #fafafa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.select-btn {
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
}

/* 数字输入组 */
.number-input-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.number-input {
  width: 180px;
}

.number-input :deep(.el-input__wrapper) {
  background: #fafafa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.input-unit {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

/* 开关样式 */
.custom-switch {
  margin-right: 12px;
}

.custom-switch :deep(.el-switch__core) {
  border-radius: 12px;
}

/* 选择器样式 */
.language-select,
.theme-select {
  width: 200px;
}

.language-select :deep(.el-input__wrapper),
.theme-select :deep(.el-input__wrapper) {
  background: #fafafa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

/* 提示信息 */
.form-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

.form-tip .el-icon {
  font-size: 14px;
  color: #409eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-navbar {
    padding: 16px;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .nav-right {
    justify-content: center;
  }
  
  .settings-content {
    padding: 16px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .path-input-group,
  .number-input-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .path-input,
  .number-input {
    width: 100%;
  }
  
  .select-btn {
    width: 100%;
  }
}
</style> 